<template>
  <div class="">
    <button @click="show = !show">
      Toggle render
    </button>

    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
import {ref,reactive,toRefs} from 'vue' 
export default {
setup(){
  const show = ref(true);
  return {
    show
  }
}
};
</script>
<style lang="scss" scoped>
/* 可以为进入和离开动画设置不同的持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>